<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-04-28 20:27:07
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-05-12 14:57:21
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\partner\\account-management\\components\\recorded-detail\\recorded-detail.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<page-header-wrapper [title]="'待入账明细'" [logo]="logo">
  <ng-template #logo>
    <button nz-button (click)="goBack()">
      <i nz-icon nzType="left" nzTheme="outline"></i>
    </button>
  </ng-template>
</page-header-wrapper>
<nz-card>
  <sv-container layout="vertical" [noColon]="true" col="6">
    <sv label="合伙人信息">
      <div
        ><b>{{ summaryObj?.partnerName }}</b></div
      >
      <div
        ><b>{{ summaryObj?.partnerInfo }}</b></div
      >
    </sv>
    <sv label="返佣总额">
      <span class="text-error-dark font-weight-bold">{{ (summaryObj?.totalRebate ? summaryObj?.totalRebate : 0) | currency }}</span>
    </sv>
    <sv label="已入账金额">
      <span class="text-error-dark font-weight-bold">{{ (summaryObj?.recordedAmount ? summaryObj?.recordedAmount : 0) | currency }}</span>
    </sv>
    <sv label="已代缴个税">
      <span class="text-error-dark font-weight-bold">{{
        (summaryObj?.recordedTaxPersonal ? summaryObj?.recordedTaxPersonal : 0) | currency
      }}</span>
    </sv>
    <sv label="入账中金额">
      <span class="text-error-dark font-weight-bold">{{
        (summaryObj?.ongoingRecordedAmount ? summaryObj?.ongoingRecordedAmount : 0) | currency
      }}</span>
    </sv>
    <sv label="代缴中个税">
      <span class="text-error-dark font-weight-bold">{{
        (summaryObj?.waitRecordedTaxPersonal ? summaryObj?.waitRecordedTaxPersonal : 0) | currency
      }}</span>
    </sv>
    <sv label="待入账金额">
      <span class="text-error-dark font-weight-bold">{{
        (summaryObj?.waitRecordedAmount ? summaryObj?.waitRecordedAmount : 0) | currency
      }}</span>
    </sv>
  </sv-container>
  <ng-template #labelTpl>
    <b class="text-md" style="color: black">{{ summaryObj?.ltdName }}</b>
  </ng-template>
</nz-card>
<nz-card>
  <div>
    <sf mode="search" #sf [schema]="schema" [ui]="ui" (formSubmit)="search()" (formReset)="resetSF()"></sf>
  </div>
  <div class="table-content">
    <st
      #st
      [data]="service.$api_get_invoice_detail_page"
      [columns]="columns"
      [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
      [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
      [page]="{ show: true, showSize: true, pageSizes: [5, 10, 20, 50, 100, 200, 500] }"
      [scroll]="{ x: '1200px' }"
    >
    <!-- [loading]="service.http.loading" -->
    
      <ng-template st-row="recordedAmount" let-item>
        <div>{{ item.recordedAmount | currency }}</div>
      </ng-template>
      <ng-template st-row="recordedTaxPersonal" let-item>
        <div>{{ item.recordedTaxPersonal | currency }}</div>
      </ng-template>
      <ng-template st-row="ongoingRecordedAmount" let-item>
        <div>{{ item.ongoingRecordedAmount | currency }}</div>
      </ng-template>
      <ng-template st-row="waitRecordedTaxPersonal" let-item>
        <div>{{ item.waitRecordedTaxPersonal | currency }}</div>
      </ng-template>
      <ng-template st-row="changeAmount" let-item>
        <div (click)="changeB(item)" style="color: #1890ff;">{{ item.changeAmount | currency }}</div>
      </ng-template>
      <ng-template st-row="waitRecordedAmount" let-item>
        <div>{{ item.waitRecordedAmount | currency }}</div>
      </ng-template>
      <ng-template st-row="totalRebate" let-item>
        <div>{{ item.totalRebate | currency }}</div>
      </ng-template>
    </st>
  </div>
</nz-card>

<nz-modal [(nzVisible)]="showBillDetail" nzTitle="账户明细" [nzFooter]="null" (nzOnCancel)="handleCancel()" nzWidth="700px">
  <div *nzModalContent>
    <div class="mb-sm">
      <span class="mr-xxl text-sm font-weight-bold"><label>网络货运人：</label>{{ detailRecord?.ltdName }}</span>
      <span class="text-sm font-weight-bold"><label>返佣总额（元）：</label>{{ detailRecord?.totalRebate | currency: ' ' }}</span>
    </div>
    <st
      #st
      [data]="billDetailList"
      [columns]="billDetailColumns"
      [res]="{ reName: { list: 'data' } }"
      [req]="{ method: 'POST', allInBody: true, params: billDetailReqParams }"
      [page]="{ show: false }"
    >
      <ng-template st-row="month" let-item>
        <div>
          <span>{{ item?.year }}年</span>
          <span>{{ item?.month }}月</span>
        </div>
      </ng-template>
      <ng-template st-row="profitAmountSum" let-item>
        <div>{{ item?.profitAmountSum | currency: ' ' }}</div>
      </ng-template>
    </st>
  </div>
</nz-modal>
<nz-modal [(nzVisible)]="showBillDetailB" nzTitle="调整待入账金额记录" [nzFooter]="null" (nzOnCancel)="handleCancelB()" nzWidth="900px">
  <div *nzModalContent>
    <div class="mb-sm">
      <span class="mr-xxl text-sm font-weight-bold"><label>网络货运人：</label>{{ changeRecordB?.ltdName }}</span>
      <span class="text-sm font-weight-bold"><label>调整金额（元）：</label>{{ changeRecordB?.changeAmount | currency: ' ' }}</span>
    </div>
    <st
      #stB
      [scroll]="{x: '700px'}"
      [data]="billDetailListB"
      [columns]="billDetailColumnsB"
      [res]="{ reName: { list: 'data' } }"
      [req]="{ method: 'POST', allInBody: true, params: billDetailReqParams }"
      [page]="{ show: false }"
    >
      <ng-template st-row="changeAmount" let-item>
        <div> {{item.changeAmount | currency}}</div>
      </ng-template>
      <ng-template st-row="createUserName" let-item>
        <div>{{ item?.createUserName ?  item?.createUserName : '--'}}/{{item?.createUserPhone ? item?.createUserPhone : '--'}}</div>
      </ng-template>
    </st>
  </div>
</nz-modal>
<nz-modal [(nzVisible)]="changeAccount" nzTitle="账户明细" [nzFooter]="nzModalFooter" (nzOnCancel)="handleCancelA()" nzWidth="600px">
  <div *nzModalContent>
      <div style="display: flex; justify-content: center; align-items: center;font-weight: 700; font-size: 16px; padding: 10px 0;"><label>网络货运人：</label>{{ changeRecord?.ltdName }}</div>
      <div style="display: flex; justify-content: center; align-items: center;font-weight: 700; font-size: 16px; padding: 10px 0;"><label>待入账金额（元）：</label>{{ changeRecord?.waitRecordedAmount | currency }}</div>
    <sf #sfView [schema]="schemaView" [ui]="uiView" [compact]="true" [button]="'none'">
      <ng-template sf-template="smsVerifyCode" let-me let-ui="uiView" let-schema="schemaView">
        <div style="display: flex;">
          <div [style.background-color]="addd ? '#ff4d4f' : '#ccc'" style="display: flex; justify-content: center; align-items: center;width: 30px; height: 30px; background-color: #ccc;margin: 0 10px;font-size: 14px;" (click)="add(changeAmount)">+</div>
          <div style="display: flex; justify-content: center; align-items: center;width: 30px; height: 30px; background-color: #ccc;margin: 0 10px;font-size: 14px;" [style.background-color]="!addd ? '#ff4d4f' : '#ccc'"  (click)="deletes(changeAmount)">-</div>
          <nz-input-number style="width: 50%;height: 32px; border-radius: 4px 0 0 4px;" nzPlaceHolder="请输入金额" [(ngModel)]="changeAmount" [nzMin]="1" [nzMax]="99999999"  [nzStep]="1"></nz-input-number>
          <span style="margin: 10px ;">元</span>
        </div>
      </ng-template>
    </sf>
  </div>
  <ng-template #nzModalFooter>
    <button nz-button nzType="primary" (click)="handleCancel()">取消</button>
    <button nz-button nzType="default" (click)="handleOK()">确定</button>
  </ng-template>
</nz-modal>
